<script setup>
import { reactive } from 'vue';
// import axios from "axios";
import axiosResquest  from "@/axios/axiosResquest.js";
import { JSEncrypt} from "jsencrypt";
import { message} from "ant-design-vue";
import { useRouter} from "vue-router";
import { regist, getPublicKey, getEncodePassword } from "@/api/userApi.js";

const router = useRouter();
const formState = reactive({  //动态响应值
  phone: '',
  password: '',
  nick: '',
  gender: '',
  birth: ''
});
//提交事件
// async
// await 异步处理，一直等待该函数执行完毕
const onFinish = async values => {
  // 1、使用公钥对password进行加密
  const encodePassword = await getEncodePassword(formState.password);

  //2、准备参数
  const param = {
    phone: formState.phone,
    password: encodePassword,   //加密
    nick: formState.nick,
    sex: formState.sex,
    birth: formState.birth
  };

  //3、注册
  await regist(param);

  //弹框提示注册成功
  message.success("恭喜您，注册成功！！！", 3, () => {
    //弹框关闭后跳转到登录页
    router.push("/login");
  });
};
//提交失败事件
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};
</script>

<template>
  <div style="background: aliceblue; padding: 30px; height: 100vh; display: flex; justify-content: center; align-items: center;">
    <a-card title="注册" :bordered="false" style="width: 600px">
      <a-form
          :model="formState"
          name="basic"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 20 }"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
      >
        <a-form-item
            label="手机号"
            name="phone"
            :rules="[
                { required: true, message: '手机号必填!' },
                { pattern: /^1[3456789]\d{9}$/,message: '请输入正确的手机号!'}
            ]"
        >
          <a-input v-model:value="formState.phone" />
        </a-form-item>
        <a-form-item
            label="密码"
            name="password"
            :rules="[{ required: true, message: '请输入密码!' }]"
        >
          <a-input-password v-model:value="formState.password" />
        </a-form-item>

        <a-form-item
            label="昵称"
            name="nick"
        >
          <a-input v-model:value="formState.nick" />
        </a-form-item>

        <a-form-item
            label="性别"
            name="gender"
        >
          <a-radio-group v-model:value="formState.gender">
            <a-radio value="1">男</a-radio>
            <a-radio value="2">女</a-radio>
            <a-radio value="3">未知</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item
            label="出生年月日"
            name="birth"
        >
          <a-date-picker v-model:value="formState.birth"/>
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" html-type="submit">注册</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<style scoped>

</style>